<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/vip">会员</a></li>
    <li><a href="#/cart">购物车</a></li>
</ul>
<div>
    单页应用程序：
    <h1 id="h1"></h1>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
    window.addEventListener('hashchange', function () {
        switch (location.hash) {
            case '#/home':
                $.getJSON('./data/home.json', function (data) {
                    $('#h1').html(data.name)
                });
                break;
            case '#/vip':
                $.getJSON('./data/vip.json', function (data) {
                    $('#h1').html(data.name)
                });
                break;
            case '#/cart':
                $.getJSON('./data/cart.json', function (data) {
                    $('#h1').html(data.name)
                });
                break;

        }
    })
</script>

</body>
</html>